<template>
  <div class='commodity'>
    <h3>
      <span>内容数：</span>
      <span>{{total}}</span>
    </h3>
     <div class='conditions'>
      <div class='leftBox'>
        <el-input v-model="listQuery.name" placeholder="请输入关键字"></el-input>
        <el-button type="primary">搜索</el-button>
      </div>
      <div class="rightBox">
        <el-button @click='addContent' class='addBtn' type="primary">添加内容</el-button>
      </div>

    </div>


    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID">
         </el-table-column>
         <el-table-column prop="userId" label="用户Id">
         </el-table-column>
    <el-table-column prop="title" label="标题">
    </el-table-column>
    <el-table-column label="内容">
      <template slot-scope="scope">
          <div v-html="scope.row.content"></div>
        </template>
    </el-table-column>
    <el-table-column label="所属标签">
      <template slot-scope="scope">
              <el-button v-for="(item,index) in scope.row.tags" :key="index">{{item.name}}</el-button>
        </template>
    </el-table-column>
    <el-table-column
        label="操作"
        width="160px"
        >
          <template slot-scope="scope">
              <el-button class='defaultBtn' @click='goDetails(scope.row)' type="text">查看</el-button>
              <el-button  class='defaultBtn' @click='editCommodity(scope.row)' type="text">编辑</el-button>
              <el-button  @click='deleteCommodity(scope.row)' type="text">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <div class='paginationBox'>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="1" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>



  </div>
</template>


<script>
import { showDecimal } from "@/utils";
import { list,del } from "@/api/culture";
import { getToken } from '@/utils/auth';
  export default {
    name:'eleList',
    data() {
      return {
        input:"",
        selectedOptions3:"",
        total:0,
        value5:'',
        tableData:[],
        names:{},
        listQuery:{
          limit:10,
          page:0,
          managerId:0
        },
        hasStoreStatus:false,
        hasPremStatus:false,
      }
    },
    methods:{
        //标签列表
        openList(){
          this.listQuery.managerId=this.$route.query.managerId;
           if(localStorage.getItem('role')=='team'){
           this.listQuery.managerId=localStorage.getItem('id');
         }
          list(this.listQuery).then(json => {
            if(json.status === 200){
              // console.log(json,'data')
              this.tableData = json.data;
              this.total = json.total;
            }
          });
        },

        getPrice(data){
           return showDecimal(data.price);
        },



        //查看详情
        goDetails(data){
          this.$router.push({name:'contentDetail',query:{ managerId:this.$route.query.managerId,id:data.id }});
        },
        //添加内容
        addContent(){
          this.$router.push({name:'addContent',query:{managerId:this.$route.query.managerId}});
        },
        //编辑内容
        editCommodity(row){
            this.$router.push({name:'addContent',query:{id:row.id,managerId:this.$route.query.managerId}})
        },
        //删除内容
        deleteCommodity(row){
            this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              del({targetId:row.id,token:getToken()}).then((json) => {
                if(json.status === 200){
                    this.openList();
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
        handleSizeChange(val) {
            this.listQuery.limit = val;
            this.openList();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val - 1;
            this.openList();
        }
    },
    mounted(){
      this.openList();
    }
  }

</script>



<style lang="scss" scoped>
  .commodity {
    margin-top: 55px;
    background: #fff;
    padding: 25px 29px;
    .failed{
      color: #be1a21;
    }
    .imgBox {
      width: 36px;
      height: 36px;
      img {
       width: 100%;
       height: 100%;
      }
    }

    .defaultBtn{
      color: #409eff;
    }

    h3 {
      color: rgba(45, 45, 45, 1);
      font-size: 22px;
      margin-bottom: 19px;
      font-weight: 400;

      span:last-child {
        color: rgba(190, 26, 33, 1);
      }
    }

    .conditions {
      display: flex;
      justify-content: space-between;

      margin-bottom: 31px;
      .leftBox{
        width: 20%;
        display: flex;
        justify-content: space-between;
        .el-input {
          width: 70%;
        }
      }
      .rightBox{
        .addBtn{
          background: #be1a21;
          color: #fff;
          border: 1px solid #be1a21;
        }
      }

    }

    .paginationBox{
        text-align: right;
        margin-top: 60px;
    }
  }
</style>
